<template>
	<div class="process-standard">
		<el-card>
			<template #header>
				<div class="header-bar">
					工序检验标准管理
					<el-button type="primary" size="small" @click="openDialog('add')">新增标准</el-button>
				</div>
			</template>

			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="检验编码">
					<el-input v-model="filters.code" />
				</el-form-item>
				<el-form-item label="标准名称">
					<el-input v-model="filters.name" />
				</el-form-item>
				<el-form-item label="产品分类">
					<el-input v-model="filters.category" />
				</el-form-item>
				<el-form-item label="工序编号">
					<el-input v-model="filters.process" />
				</el-form-item>
				<el-button type="primary">搜索</el-button>
				<el-button @click="reset">重置</el-button>
			</el-form>

			<el-table :data="filteredList" border stripe>
				<el-table-column prop="code" label="检验编码" width="120" />
				<el-table-column prop="name" label="标准名称" />
				<el-table-column prop="method" label="检验方式" width="100" />
				<el-table-column prop="category" label="产品分类" />
				<el-table-column prop="version" label="版本号" width="80" />
				<el-table-column prop="process" label="工序编号" />
				<el-table-column prop="enabled" label="启用" width="80">
					<template #default="scope">
						<el-tag :type="scope.row.enabled ? 'success' : 'info'">{{ scope.row.enabled ? '是' : '否'
							}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="count" label="抽检数量" width="100" />
				<el-table-column label="操作" width="160">
					<template #default="scope">
						<el-button type="text" @click="openDialog('edit', scope.row)">编辑</el-button>
						<el-button type="text" @click="removeRecord(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-dialog v-model="dialogVisible" :title="dialogTitle" width="700px">
				<el-form :model="form" label-width="100px">
					<el-form-item label="检验编码">
						<el-input v-model="form.code" />
					</el-form-item>
					<el-form-item label="标准名称">
						<el-input v-model="form.name" />
					</el-form-item>
					<el-form-item label="检验方式">
						<el-input v-model="form.method" />
					</el-form-item>
					<el-form-item label="产品分类">
						<el-input v-model="form.category" />
					</el-form-item>
					<el-form-item label="版本号">
						<el-input v-model="form.version" />
					</el-form-item>
					<el-form-item label="工序编号">
						<el-input v-model="form.process" />
					</el-form-item>
					<el-form-item label="是否启用">
						<el-switch v-model="form.enabled" />
					</el-form-item>
					<el-form-item label="抽检数量">
						<el-input-number v-model="form.count" :min="0" />
					</el-form-item>
					<el-form-item label="检测项目">
						<el-table :data="form.items" border size="small">
							<el-table-column label="项目名称">
								<template #default="scope">
									<el-input v-model="scope.row.name" placeholder="如：尺寸检查" />
								</template>
							</el-table-column>
							<el-table-column label="方法">
								<template #default="scope">
									<el-input v-model="scope.row.method" placeholder="如：尺量" />
								</template>
							</el-table-column>
							<el-table-column label="要求">
								<template #default="scope">
									<el-input v-model="scope.row.requirement" placeholder="如：±2mm" />
								</template>
							</el-table-column>
							<el-table-column width="100" label="操作">
								<template #default="scope">
									<el-button type="text" @click="form.items.splice(scope.$index, 1)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>

						<el-button size="small" @click="addItem" class="mt-2">添加检测项目</el-button>
					</el-form-item>
				</el-form>
				<template #footer>
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm">保存</el-button>
				</template>
			</el-dialog>
		</el-card>
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'

const list = ref([...Array(10)].map((_, i) => ({
	code: `PS00${i + 1}`,
	name: `工序标准 ${i + 1}`,
	method: ['目检', '测量', '性能测试'][i % 3],
	category: ['钢结构', '混凝土', '塑料件'][i % 3],
	version: `V${i + 1}.0`,
	process: `GX-${100 + i}`,
	enabled: i % 2 === 0,
	count: 5 + i,
	items: [
		{ name: '尺寸检查', method: '尺量', requirement: '±2mm' },
		{ name: '外观检查', method: '目检', requirement: '无划痕' }
	]
})))

const filters = ref({ code: '', name: '', category: '', process: '' })
const filteredList = computed(() => {
	return list.value.filter(i => {
		const f = filters.value
		return [
			!f.code || i.code.includes(f.code),
			!f.name || i.name.includes(f.name),
			!f.category || i.category.includes(f.category),
			!f.process || i.process.includes(f.process)
		].every(Boolean)
	})
})

const reset = () => {
	filters.value = { code: '', name: '', category: '', process: '' }
}

const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({})
const currentIndex = ref(-1)

const openDialog = (type, row) => {
	dialogTitle.value = type === 'add' ? '新增工序检验标准' : '编辑工序检验标准'
	dialogVisible.value = true
	if (type === 'edit') {
		form.value = { ...row, items: [...row.items] }
		currentIndex.value = list.value.findIndex(i => i.code === row.code)
	} else {
		form.value = {
			code: '', name: '', method: '', category: '', version: '',
			process: '', enabled: false, count: 0, items: []
		}
		currentIndex.value = -1
	}
}

const submitForm = () => {
	if (currentIndex.value >= 0) {
		list.value[currentIndex.value] = { ...form.value }
	} else {
		list.value.push({ ...form.value })
	}
	dialogVisible.value = false
}

const removeRecord = (index) => {
	list.value.splice(index, 1)
}

const addItem = () => {
	form.value.items.push({ name: '', method: '', requirement: '' })
}
</script>

<style scoped>
.process-standard {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
}

.mt-2 {
	margin-top: 10px;
}
</style>
  
